<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>vis.js - Network documentation.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <style>
      tr.subHeader {
        font-weight: bold;
        font-style: italic;
      }

      tr.subHeader td {
        padding-top: 30px;
      }

      td.midMethods {
        width: 150px;
        background-color: #ffffff;
        border: 1px solid #dddddd;
      }

      tr.visible td {
        padding: 10px;
      }
    </style>

    <script>
      function toggleGettingStarted(aThis) {
        var gettingStartedDiv = document.getElementById("gettingStarted");
        if (aThis.innerText.indexOf("Show") !== -1) {
          gettingStartedDiv.className = "";
          aThis.innerText = "Hide the getting started again.";
        } else {
          gettingStartedDiv.className = "hidden";
          aThis.innerText = "Show the getting started!";
        }
      }
    </script>

    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
  </head>
  <body onload="prettyPrint();">
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false"
                aria-controls="navbar"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav"></ul>
              <form class="navbar-form navbar-right" role="search">
                <input
                  name="q"
                  id="tipue_search_input"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  placeholder="Enter keywords"
                />
                <button
                  type="button"
                  class="btn btn-default"
                  onclick="vis.initSiteSearch(true);"
                >
                  Go!
                </button>
              </form>
              <div id="search-results-wrapper" class="panel panel-default">
                <div class="panel-body">
                  <div id="tipue_search_content"></div>
                </div>
              </div>
              <div id="keyword-info" class="panel panel-success">
                <div class="panel-body">
                  Found <span id="keyword-count"></span> results. Click
                  <a id="keyword-jumper-button" href="">here</a> to jump to the
                  first keyword occurence!
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div class="container full">
      <h1>Network</h1>

      <p>
        Network is a visualization to display networks and networks consisting
        of nodes and edges. The visualization is easy to use and supports custom
        shapes, styles, colors, sizes, images, and more. The network
        visualization works smooth on any modern browser for up to a few
        thousand nodes and edges. To handle a larger amount of nodes, Network
        has clustering support. Network uses HTML canvas for rendering.
      </p>

      <p>
        As of 4.0, the network consists of individual modules which handle
        specific parts of the network. These modules have their own docs,
        options, methods and events which you can access by clicking on the
        modules in the list below.
      </p>

      <a
        class="btn btn-primary"
        role="button"
        onclick="toggleGettingStarted(this)"
        >Show the getting started!</a
      >
      <div id="gettingStarted" class="hidden">
        <h3>Creating a Network</h3>

        <p>
          Creating a Vis Network is easy. It requires you to include the
          vis-network.js and vis-network.css files which you can download from
          <a href="https://visjs.org/#download_install" target="_blank"
            >visjs.org</a
          >, link them from
          <a href="https://unpkg.com/vis-network/" target="_blank">unpkg.com</a>
          or require/import from
          <a href="https://www.npmjs.com/package/vis-network" target="_blank"
            >npm package</a
          >. If you have these added to your application, you will need to
          specify your nodes and edges. You can use DOT language or export nodes
          and edges from Gephi if you'd like but we will do it without these for
          now. For more information on this click the tabs below. You can also
          use the vis.DataSets for dynamic data binding, for instance, changing
          the color, label or any option after you have initialized the network.
          <br /><br />
          Once you have the data, all you need is a container div to tell vis
          where to put your network. Additionally you can use an options object
          to customize many aspects of the network. In code this looks like
          this:
        </p>

        <p>There are three ways how to import Vis Network:</p>
        <ul>
          <li>
            Standalone build:
            <ul>
              <li>simple to use (link/require/import a single file),</li>
              <li>CSS included and automatically injected into the page,</li>
              <li>JavaScript dependencies bundled,</li>
              <li>doesn't work with other Vis family packages,</li>
              <li>
                <a
                  href="../../examples/network/basic_usage/standalone.html"
                  target="_blank"
                  >example usage</a
                >,
              </li>
              <li>
                <a
                  href="https://unpkg.com/vis-network/standalone/"
                  target="_blank"
                  >linkable files on unpkg</a
                >.
              </li>
            </ul>
          </li>
          <li>
            Peer build:
            <ul>
              <li>
                in case of UMD Vis Data and Vis Util have to be loaded manually,
              </li>
              <li>
                in case of ESM DataSets, DataViews etc. have to be loaded from
                Vis Data,
              </li>
              <li>CSS has to be included separately,</li>
              <li>works with other Vis family packages,</li>
              <li>
                <a
                  href="../../examples/network/basic_usage/peer.html"
                  target="_blank"
                  >example usage</a
                >,
              </li>
              <li>
                <a href="https://unpkg.com/vis-network/peer/" target="_blank"
                  >linkable files on unpkg</a
                >.
              </li>
            </ul>
          </li>
          <li>
            Legacy build:
            <ul>
              <li>
                kept only for backward compatibility, please
                <strong>don't</strong> use,
              </li>
              <li>CSS has to be included separately,</li>
              <li>JavaScript dependencies bundled,</li>
              <li>doesn't play well with tree shaking,</li>
              <li>doesn't work with other Vis family packages,</li>
              <li>
                <a
                  href="../../examples/network/basic_usage/legacy.html"
                  target="_blank"
                  >example usage</a
                >,
              </li>
              <li>
                <a href="https://unpkg.com/vis-network/dist/" target="_blank"
                  >linkable files on unpkg</a
                >.
              </li>
            </ul>
          </li>
        </ul>

        <h4>Simplest example (using standalone build)</h4>
        <pre class="prettyprint lang-html options">
&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"&gt;&lt;/script&gt;

    &lt;style type="text/css"&gt;
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mynetwork"&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;
    // create an array with nodes
    var nodes = new vis.DataSet([
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ]);

    // create an array with edges
    var edges = new vis.DataSet([
        {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ]);

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};

    // initialize your network!
    var network = new vis.Network(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre
        >
        <p>
          <a href="../../examples/network/basicUsage.html" target="_blank"
            >The result of the code above will be the basic example which is
            shown here.</a
          >
        </p>

        <br />
      </div>

      <h2 id="Contents">Contents</h2>
      <ul>
        <li><a href="#modules">Modules</a></li>
        <li><a href="#options">Options</a></li>
        <li>
          <a href="#methods">Method Reference</a>
          <ul>
            <li><a href="#methodGlobal">Global</a></li>
            <li><a href="#methodCanvas">Canvas</a></li>
            <li><a href="#methodClustering">Clustering</a></li>
            <li><a href="#methodLayout">Layout</a></li>
            <li><a href="#methodManipulation">Manipulation</a></li>
            <li><a href="#methodInformation">Information</a></li>
            <li><a href="#methodPhysics">Physics</a></li>
            <li><a href="#methodSelection">Selection</a></li>
            <li><a href="#methodViewport">Viewport</a></li>
            <li><a href="#methodConfigurator">Configurator</a></li>
          </ul>
        </li>
        <li><a href="#Events">Events</a></li>
        <li>
          <a href="#importing_data">Importing Data</a>
          <ul>
            <li><a href="#importGephi">from Gephi</a></li>
            <li><a href="#importDot">from DOT language</a></li>
          </ul>
        </li>
      </ul>

      <h2 id="modules">Modules</h2>
      <table class="modules">
        <tr>
          <td width="120px"><a href="./configure.html">configure</a></td>
          <td>Generates an interactive option editor with filtering.</td>
        </tr>
        <tr>
          <td><a href="./edges.html">edges</a></td>
          <td>
            Handles the creation and deletion of edges and contains the global
            edge options and styles.
          </td>
        </tr>
        <tr>
          <td><a href="./groups.html">groups</a></td>
          <td>
            Contains the groups and some options on how to handle nodes with
            non-existing groups.
          </td>
        </tr>
        <tr>
          <td><a href="./interaction.html">interaction</a></td>
          <td>
            Used for all user interaction with the network. Handles mouse and
            touch events and selection as well as the navigation buttons and the
            popups.
          </td>
        </tr>
        <tr>
          <td><a href="./layout.html">layout</a></td>
          <td>Governs the initial and hierarchical positioning.</td>
        </tr>
        <tr>
          <td><a href="./manipulation.html">manipulation</a></td>
          <td>
            Supplies an API and optional GUI to alter the data in the network.
          </td>
        </tr>
        <tr>
          <td><a href="./nodes.html">nodes</a></td>
          <td>
            Handles the creation and deletion of nodes and contains the global
            node options and styles.
          </td>
        </tr>
        <tr>
          <td><a href="./physics.html">physics</a></td>
          <td>
            Does all the simulation moving the nodes and edges to their final
            positions, also governs stabilization.
          </td>
        </tr>
      </table>

      <br />

      <div id="optionsDiv">
        <h2 id="options">Options</h2>
        <pre class="prettyprint lang-js options">
var options = {
  autoResize: true,
  height: '100%',
  width: '100%'
  locale: 'en',
  locales: locales,
  clickToUse: false,
  configure: {...},    // defined in the configure module.
  edges: {...},        // defined in the edges module.
  nodes: {...},        // defined in the nodes module.
  groups: {...},       // defined in the groups module.
  layout: {...},       // defined in the layout module.
  interaction: {...},  // defined in the interaction module.
  manipulation: {...}, // defined in the manipulation module.
  physics: {...},      // defined in the physics module.
}

network.setOptions(options);
</pre
        >
        <p>
          The individual options are explained below. The ones referring to
          modules are explained in the corresponding module.
        </p>
        <table class="options">
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
          </tr>
          <tr>
            <td id="event_autoResize">autoResize</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              If true, the Network will automatically detect when its container
              is resized, and redraw itself accordingly. If false, the Network
              can be forced to repaint after its container has been resized
              using the function redraw() and setSize().
            </td>
          </tr>
          <tr>
            <td id="event_width">width</td>
            <td>String</td>
            <td><code>'100%'</code></td>
            <td>
              the width of the canvas. Can be in percentages or pixels (ie.
              <code>'400px'</code>).
            </td>
          </tr>
          <tr>
            <td id="event_height">height</td>
            <td>String</td>
            <td><code>'100%'</code></td>
            <td>
              the height of the canvas. Can be in percentages or pixels (ie.
              <code>'400px'</code>).
            </td>
          </tr>
          <tr>
            <td id="event_locale">locale</td>
            <td>String</td>
            <td><code>'en'</code></td>
            <td>Select the locale. By default, the language is English.</td>
          </tr>
          <tr>
            <td id="event_locales">locales</td>
            <td>Object</td>
            <td>defaultLocales</td>
            <td>
              Locales object. By default <code>'en'</code>, <code>'de'</code>,
              <code>'es'</code>, <code>'it'</code>,
              <code>'nl'</code>
              <code>'pt-br'</code>,
              <code>'ru'</code>
              are supported. Take a look at the
              <a
                href="#locales"
                data-scroll=""
                data-options='{ "easing": "easeInCubic" }'
                >locales section below</a
              >
              for more explaination on how to customize this.
            </td>
          </tr>
          <tr>
            <td id="event_clickToUse">clickToUse</td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              When a Network is configured to be <code>clickToUse</code>, it
              will react to mouse and touch events only when active. When
              active, a blue shadow border is displayed around the Network. The
              network is set active by clicking on it, and is changed to
              inactive again by clicking outside the Network or by pressing the
              ESC key.
            </td>
          </tr>
          <tr>
            <td id="event_configure">configure</td>
            <td>Object</td>
            <td>Object</td>
            <td>
              All options in this object are explained in the
              <a href="./configure.html">configure module</a>.
            </td>
          </tr>
          <tr>
            <td id="event_edges">edges</td>
            <td>Object</td>
            <td>Object</td>
            <td>
              All options in this object are explained in the
              <a href="./edges.html">edges module</a>.
            </td>
          </tr>
          <tr>
            <td id="event_nodes">nodes</td>
            <td>Object</td>
            <td>Object</td>
            <td>
              All options in this object are explained in the
              <a href="./nodes.html">nodes module</a>.
            </td>
          </tr>
          <tr>
            <td id="event_groups">groups</td>
            <td>Object</td>
            <td>Object</td>
            <td>
              All options in this object are explained in the
              <a href="./groups.html">groups module</a>.
            </td>
          </tr>
          <tr>
            <td id="event_layout">layout</td>
            <td>Object</td>
            <td>Object</td>
            <td>
              All options in this object are explained in the
              <a href="./layout.html">layout module</a>.
            </td>
          </tr>
          <tr>
            <td id="event_interaction">interaction</td>
            <td>Object</td>
            <td>Object</td>
            <td>
              All options in this object are explained in the
              <a href="./interaction.html">interaction module</a>.
            </td>
          </tr>
          <tr>
            <td id="event_manipulation">manipulation</td>
            <td>Object</td>
            <td>Object</td>
            <td>
              All options in this object are explained in the
              <a href="./manipulation.html">manipulation module</a>.
            </td>
          </tr>
          <tr>
            <td id="event_physics">physics</td>
            <td>Object</td>
            <td>Object</td>
            <td>
              All options in this object are explained in the
              <a href="./physics.html">physics module</a>.
            </td>
          </tr>
        </table>

        <br />
        <br />
        <h4 id="locales">Custom locales</h4>

        <p>The locales object has the following format:</p>
        <pre class="prettyprint lang-js">
var locales = {
  en: {
    edit: 'Edit',
    del: 'Delete selected',
    back: 'Back',
    addNode: 'Add Node',
    addEdge: 'Add Edge',
    editNode: 'Edit Node',
    editEdge: 'Edit Edge',
    addDescription: 'Click in an empty space to place a new node.',
    edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
    editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
    createEdgeError: 'Cannot link edges to a cluster.',
    deleteClusterError: 'Clusters cannot be deleted.',
    editClusterError: 'Clusters cannot be edited.'
  }
}</pre
        >
        <p>
          If you want to define your own locale, you can change the key ('en'
          here) and change all the strings. You can then use your new key in the
          locale option.
        </p>
      </div>
      <br />
      <hr />
      <div id="methodsDiv">
        <h2 id="methods">Methods</h2>

        <p>
          This is a list of all the methods in the public API. They have been
          grouped by category, which correspond to the modules listed above.
        </p>
        <table class="methods-collapsable" id="methodTable">
          <tr id="methodGlobal" class="subHeader">
            <td colspan="2">Global methods for the network.</td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','destroy', this);"
          >
            <td colspan="2">
              <span
                parent="destroy"
                class="right-caret"
                id="method_destroy"
              ></span>
              destroy()
            </td>
          </tr>
          <tr class="hidden" parent="destroy">
            <td class="midMethods">Returns: none</td>
            <td>
              Remove the network from the DOM and remove all Hammer bindings and
              references.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','setData', this);"
          >
            <td colspan="2">
              <span
                parent="setData"
                class="right-caret"
                id="method_setData"
              ></span>
              setData({<code><i>nodes: vis DataSet/Array</i></code
              >,<code><i>edges: vis DataSet/Array</i></code
              >})
            </td>
          </tr>
          <tr class="hidden" parent="setData">
            <td class="midMethods">Returns: none</td>
            <td>
              Override all the data in the network. If stabilization is enabled
              in the <a href="physics.html">physics module</a>, the network will
              stabilize again. This method is also performed when first
              initializing the network.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','setOptions', this);"
          >
            <td colspan="2">
              <span
                parent="setOptions"
                class="right-caret"
                id="method_setOptions"
              ></span>
              setOptions(<code>Object options</code>)
            </td>
          </tr>
          <tr class="hidden" parent="setOptions">
            <td class="midMethods">Returns: none</td>
            <td>
              Set the options. All available options can be found in the modules
              above. Each module requires its own container with the module name
              to contain its options.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','onEvent', this);"
          >
            <td colspan="2">
              <span parent="onEvent" class="right-caret" id="method_on"></span>
              on(<code>String event name, Function callback</code>)
            </td>
          </tr>
          <tr class="hidden" parent="onEvent">
            <td class="midMethods">Returns: none</td>
            <td>
              Set an event listener. Depending on the type of event you get
              different parameters for the callback function. Look at the event
              section of the documentation for more information.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','offEvent', this);"
          >
            <td colspan="2">
              <span
                parent="offEvent"
                class="right-caret"
                id="method_off"
              ></span>
              off(<code>String event name, Function callback</code>)
            </td>
          </tr>
          <tr class="hidden" parent="offEvent">
            <td class="midMethods">Returns: none</td>
            <td>
              Remove an event listener. The function you supply has to be the
              exact same as the one you used in the on function. If no function
              is supplied, all listeners will be removed. Look at the event
              section of the documentation for more information.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','onceEvent', this);"
          >
            <td colspan="2">
              <span
                parent="onceEvent"
                class="right-caret"
                id="method_once"
              ></span>
              once(<code>String event name, Function callback</code>)
            </td>
          </tr>
          <tr class="hidden" parent="onceEvent">
            <td class="midMethods">Returns: none</td>
            <td>
              Set an event listener only once. After it has taken place, the
              event listener will be removed. Depending on the type of event you
              get different parameters for the callback function. Look at the
              event section of the documentation for more information.
            </td>
          </tr>

          <tr id="methodCanvas" class="subHeader">
            <td colspan="2">Methods related to the canvas.</td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','canvasToDOM', this);"
          >
            <td colspan="2">
              <span
                parent="canvasToDOM"
                class="right-caret"
                id="method_canvasToDOM"
              ></span>
              canvasToDOM({<code><i>x: Number</i></code
              >,<code><i>y: Number</i></code
              >})
            </td>
          </tr>
          <tr class="hidden" parent="canvasToDOM">
            <td class="midMethods">Returns: Object</td>
            <td>
              This function converts canvas coordinates to coordinates on the
              DOM. Input and output are in the form of
              <code>{x:Number,y:Number}</code>. The DOM values are relative to
              the network container.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','DOMtoCanvas', this);"
          >
            <td colspan="2">
              <span
                parent="DOMtoCanvas"
                class="right-caret"
                id="method_DOMtoCanvas"
              ></span>
              DOMtoCanvas({<code><i>x: Number</i></code
              >,<code><i>y: Number</i></code
              >})
            </td>
          </tr>
          <tr class="hidden" parent="DOMtoCanvas">
            <td class="midMethods">Returns: Object</td>
            <td>
              This function converts DOM coordinates to coordinates on the
              canvas. Input and output are in the form of
              <code>{x:Number,y:Number}</code>. The DOM values are relative to
              the network container.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','redraw', this);"
          >
            <td colspan="2">
              <span
                parent="redraw"
                class="right-caret"
                id="method_redraw"
              ></span>
              redraw()
            </td>
          </tr>
          <tr class="hidden" parent="redraw">
            <td class="midMethods">Returns: none</td>
            <td>Redraw the network.</td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','setSize', this);"
          >
            <td colspan="2">
              <span
                parent="setSize"
                class="right-caret"
                id="method_setSize"
              ></span>
              setSize(<code><i>String width</i></code
              >,<code><i>String height</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="setSize">
            <td class="midMethods">Returns: none</td>
            <td>
              Set the size of the canvas. This is automatically done on a window
              resize.
            </td>
          </tr>

          <tr id="methodClustering" class="subHeader">
            <td colspan="2">Clustering</td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','cluster', this);"
          >
            <td colspan="2">
              <span
                parent="cluster"
                class="right-caret"
                id="method_cluster"
              ></span>
              cluster( <code>Object options</code>)
            </td>
          </tr>
          <tr class="hidden" parent="cluster">
            <td class="midMethods">Returns: none</td>
            <td>
              The options object is explained in full
              <a
                data-scroll=""
                data-options='{ "easing": "easeInCubic" }'
                href="#optionsObject"
                >below</a
              >. The joinCondition function is presented with all nodes.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','clusterByConnection', this);"
          >
            <td colspan="2">
              <span
                parent="clusterByConnection"
                class="right-caret"
                id="method_clusterByConnection"
              ></span>
              clusterByConnection( <code>String nodeId</code>,
              <code>[Object options]</code>
              )
            </td>
          </tr>
          <tr class="hidden" parent="clusterByConnection">
            <td class="midMethods">Returns: none</td>
            <td>
              This method looks at the provided node and makes a cluster of it
              and all it's connected nodes. The behaviour can be customized by
              proving the options object. All options of this object are
              explained
              <a
                data-scroll=""
                data-options='{ "easing": "easeInCubic" }'
                href="#optionsObject"
                >below</a
              >. The joinCondition is only presented with the connected nodes.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','clusterByHubsize', this);"
          >
            <td colspan="2">
              <span
                parent="clusterByHubsize"
                class="right-caret"
                id="method_clusterByHubsize"
              ></span>
              clusterByHubsize( <code>[Number hubsize]</code>,
              <code>[Object options]</code>)
            </td>
          </tr>
          <tr class="hidden" parent="clusterByHubsize">
            <td class="midMethods">Returns: none</td>
            <td>
              This method checks all nodes in the network and those with a equal
              or higher amount of edges than specified with the
              <code>hubsize</code> qualify. If a hubsize is not defined, the
              hubsize will be determined as the average value plus two standard
              deviations. <br /><br />

              For all qualifying nodes, clusterByConnection is performed on each
              of them. The options object is described for
              <code>clusterByConnection</code> and does the same here.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','clusterOutliers', this);"
          >
            <td colspan="2">
              <span
                parent="clusterOutliers"
                class="right-caret"
                id="method_clusterOutliers"
              ></span>
              clusterOutliers( <code>[Object options]</code>)
            </td>
          </tr>

          <tr class="hidden" parent="clusterOutliers">
            <td class="midMethods">Returns: none</td>
            <td>
              This method will cluster all nodes with 1 edge with their
              respective connected node. The options object is explained in full
              <a
                data-scroll=""
                data-options='{ "easing": "easeInCubic" }'
                href="#optionsObject"
                >below</a
              >.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','findNode', this);"
          >
            <td colspan="2">
              <span
                parent="findNode"
                class="right-caret"
                id="method_findNode"
              ></span>
              findNode( <code>String/Number nodeId</code>)
            </td>
          </tr>

          <tr class="hidden" parent="findNode">
            <td class="midMethods">Returns: Array</td>
            <td>
              Nodes can be in clusters. Clusters can also be in clusters. This
              function returns an array of nodeIds showing where the node is.

              <br /><br />
              If any nodeId in the chain, especially the first passed in as a
              parameter, is not present in the current nodes list, an empty
              array is returned.

              <br /><br />
              Example: cluster 'A' contains cluster 'B', cluster 'B' contains
              cluster 'C', cluster 'C' contains node 'fred'.
              <code>network.clustering.findNode('fred')</code> will return
              <code>['A','B','C','fred']</code>.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getClusteredEdges', this);"
          >
            <td colspan="2">
              <span
                parent="getClusteredEdges"
                class="right-caret"
                id="method_getClusteredEdges"
              ></span>
              getClusteredEdges( <code>String baseEdgeId</code>)
            </td>
          </tr>

          <tr class="hidden" parent="getClusteredEdges">
            <td class="midMethods">Returns: Array</td>
            <td>
              Similar to <code>findNode</code> in that it returns all the edge
              ids that were created from the provided edge during clustering
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getBaseEdge', this);"
          >
            <td colspan="2">
              <span
                parent="getBaseEdge"
                class="right-caret"
                id="method_getBaseEdge"
              ></span>
              getBaseEdge( <code>String clusteredEdgeId</code>)
            </td>
          </tr>

          <tr class="hidden" parent="getBaseEdge">
            <td class="midMethods">Returns: Value</td>
            <td>
              When a clusteredEdgeId is available, this method will return the
              original baseEdgeId provided in <code>data.edges</code><br />
              ie. After clustering the 'SelectEdge' event is fired but provides
              only the clustered edge. This method can then be used to return
              the baseEdgeId.<br /><br />
              <b
                >This method is deprecated. Please use
                <code>getBaseEdges()</code> instead.</b
              >
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getBaseEdges', this);"
          >
            <td colspan="2">
              <span
                parent="getBaseEdges"
                class="right-caret"
                id="method_getBaseEdges"
              ></span>
              getBaseEdges(<code>String clusteredEdgeId</code>)
            </td>
          </tr>
          <tr class="hidden" parent="getBaseEdges">
            <td class="midMethods">Returns: Array</td>
            <td>
              For the given <code>clusteredEdgeId</code>, this method will
              return all the original base edge id's provided in
              <code>data.edges</code>. For a non-clustered (i.e. 'base') edge,
              <code>clusteredEdgeId</code> is returned.<br /><br />
              Only the base edge id's are returned. All clustered edges id's
              under <code>clusteredEdgeId</code> are skipped, but scanned
              recursively to return their base id's.<br />
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','updateEdge', this);"
          >
            <td colspan="2">
              <span
                parent="updateEdge"
                class="right-caret"
                id="method_updateEdge"
              ></span>
              updateEdge( <code>String startEdgeId, Object options</code>)
            </td>
          </tr>

          <tr class="hidden" parent="updateEdge">
            <td class="midMethods">Returns: none</td>
            <td>
              Visible edges between clustered nodes are not the same edge as the
              ones provided in <code>data.edges</code> passed on
              <code>network</code> creation<br />
              With each layer of clustering, copies of the edges between
              clusters are created and the previous edges are hidden, until the
              cluster is opened.<br />
              This method takes an edgeId (ie. a base edgeId from
              <code>data.edges</code>) and applies the options to it and any
              edges that were created from it while clustering.<br /><br />
              Example:
              <code
                >network.clustering.updateEdge(originalEdge.id, {color :
                '#aa0000'});</code
              ><br />
              This would turn the base edge and any subsequent edges red, so
              when opening clusters the edges will all be the same color.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','updateClusteredNode', this);"
          >
            <td colspan="2">
              <span
                parent="updateClusteredNode"
                class="right-caret"
                id="method_updateClusteredNode"
              ></span>
              updateClusteredNode(
              <code>String clusteredNodeId, Object options</code>)
            </td>
          </tr>

          <tr class="hidden" parent="updateClusteredNode">
            <td class="midMethods">Returns: none</td>
            <td>
              Clustered Nodes when created are not contained in the original
              <code>data.nodes</code> passed on
              <code>network</code> creation<br />
              This method updates the cluster node.<br /><br />
              Example:
              <code
                >network.clustering.updateClusteredNode(clusteredNodeId, {shape
                : 'star'});</code
              >
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','isCluster', this);"
          >
            <td colspan="2">
              <span
                parent="isCluster"
                class="right-caret"
                id="method_isCluster"
              ></span>
              isCluster( <code>String nodeId</code>)
            </td>
          </tr>

          <tr class="hidden" parent="isCluster">
            <td class="midMethods">Returns: Boolean</td>
            <td>
              Returns true if the node whose ID has been supplied is a cluster.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getNodesInCluster', this);"
          >
            <td colspan="2">
              <span
                parent="getNodesInCluster"
                class="right-caret"
                id="method_getNodesInCluster"
              ></span>
              getNodesInCluster( <code>String clusterNodeId</code>)
            </td>
          </tr>

          <tr class="hidden" parent="getNodesInCluster">
            <td class="midMethods">Returns: Array</td>
            <td>
              Returns an array of all nodeIds of the nodes that would be
              released if you open the cluster.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','openCluster', this);"
          >
            <td colspan="2">
              <span
                parent="openCluster"
                class="right-caret"
                id="method_openCluster"
              ></span>
              openCluster( <code>String nodeId, Object options</code>)
            </td>
          </tr>

          <tr class="hidden" parent="openCluster">
            <td class="midMethods">Returns: none</td>
            <td>
              Opens the cluster, releases the contained nodes and edges,
              removing the cluster node and cluster edges. The options object is
              optional and currently supports one option, releaseFunction, which
              is a function that can be used to manually position the nodes
              after the cluster is opened. <br />
              <pre class="code">
function releaseFunction (clusterPosition, containedNodesPositions) {
    var newPositions = {};
    // clusterPosition = {x:clusterX, y:clusterY};
    // containedNodesPositions = {nodeId:{x:nodeX,y:nodeY}, nodeId2....}
    newPositions[nodeId] = {x:newPosX, y:newPosY};
    return newPositions;
}</pre
              >
              The containedNodesPositions contain the positions of the nodes in
              the cluster at the moment they were clustered. This function is
              expected to return the newPositions, which can be the
              containedNodesPositions (altered) or a new object. This has to be
              an object with keys equal to the nodeIds that exist in the
              containedNodesPositions and an <code>{x:x,y:y}</code> position
              object. <br /><br />

              For all nodeIds not listed in this returned object, we will
              position them at the location of the cluster. This is also the
              default behaviour when no releaseFunction is defined.
            </td>
          </tr>

          <tr id="methodLayout" class="subHeader">
            <td colspan="2">Layout</td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getSeed', this);"
          >
            <td colspan="2">
              <span
                parent="getSeed"
                class="right-caret"
                id="method_getSeed"
              ></span>
              getSeed()
            </td>
          </tr>
          <tr class="hidden" parent="clusterByHubsize"></tr>
          <tr class="hidden" parent="getSeed">
            <td class="midMethods">Returns: Number or String</td>
            <td>
              If you like the layout of your network and would like it to start
              in the same way next time, ask for the seed using this method and
              put it in the <code>layout.randomSeed</code> option.
            </td>
          </tr>

          <tr id="methodManipulation" class="subHeader">
            <td colspan="2">
              Manipulation methods to use the manipulation system without GUI.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','enableEditMode', this);"
          >
            <td colspan="2">
              <span
                parent="enableEditMode"
                class="right-caret"
                id="method_enableEditMode"
              ></span>
              enableEditMode()
            </td>
          </tr>
          <tr class="hidden" parent="enableEditMode">
            <td class="midMethods">Returns: none</td>
            <td>
              Programmatically enable the edit mode. Similar effect to pressing
              the edit button.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','disableEditMode', this);"
          >
            <td colspan="2">
              <span
                parent="disableEditMode"
                class="right-caret"
                id="method_disableEditMode"
              ></span>
              disableEditMode()
            </td>
          </tr>
          <tr class="hidden" parent="disableEditMode">
            <td class="midMethods">Returns: none</td>
            <td>
              Programmatically disable the edit mode. Similar effect to pressing
              the close icon (small cross in the corner of the toolbar).
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','addNodeMode', this);"
          >
            <td colspan="2">
              <span
                parent="addNodeMode"
                class="right-caret"
                id="method_addNodeMode"
              ></span>
              addNodeMode()
            </td>
          </tr>
          <tr class="hidden" parent="addNodeMode">
            <td class="midMethods">Returns: none</td>
            <td>
              Go into addNode mode. Having edit mode or manipulation enabled is
              not required. To get out of this mode, call
              <code>disableEditMode()</code>. The callback functions defined in
              <code>handlerFunctions</code>
              still apply. To use these methods without having the manipulation
              GUI, make sure you set
              <code>enabled</code> to false.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','editNode', this);"
          >
            <td colspan="2">
              <span
                parent="editNode"
                class="right-caret"
                id="method_editNode"
              ></span>
              editNode()
            </td>
          </tr>
          <tr class="hidden" parent="editNode">
            <td class="midMethods">Returns: none</td>
            <td>
              Edit the selected node. The explanation from
              <code>addNodeMode</code> applies here as well.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','addEdgeMode', this);"
          >
            <td colspan="2">
              <span
                parent="addEdgeMode"
                class="right-caret"
                id="method_addEdgeMode"
              ></span>
              addEdgeMode()
            </td>
          </tr>
          <tr class="hidden" parent="addEdgeMode">
            <td class="midMethods">Returns: none</td>
            <td>
              Go into addEdge mode. The explanation from
              <code>addNodeMode</code> applies here as well.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','editEdgeMode', this);"
          >
            <td colspan="2">
              <span
                parent="editEdgeMode"
                class="right-caret"
                id="method_editEdgeMode"
              ></span>
              editEdgeMode()
            </td>
          </tr>
          <tr class="hidden" parent="editEdgeMode">
            <td class="midMethods">Returns: none</td>
            <td>
              Go into editEdge mode. The explanation from
              <code>addNodeMode</code> applies here as well.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','deleteSelected', this);"
          >
            <td colspan="2">
              <span
                parent="deleteSelected"
                class="right-caret"
                id="method_deleteSelected"
              ></span>
              deleteSelected()
            </td>
          </tr>
          <tr class="hidden" parent="deleteSelected">
            <td class="midMethods">Returns: none</td>
            <td>
              Delete selected. Having edit mode or manipulation enabled is not
              required.
            </td>
          </tr>

          <tr id="methodInformation" class="subHeader">
            <td colspan="2">Methods to get information on nodes and edges.</td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getPositions', this);"
          >
            <td colspan="2">
              <span
                parent="getPositions"
                class="right-caret"
                id="method_getPositions"
              ></span>
              getPositions(<code><i>[Array of nodeIds or nodeId]</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="getPositions">
            <td class="midMethods">Returns: Object</td>
            <td>
              Returns the x y positions in canvas space of the nodes or node
              with the supplied nodeIds or nodeId as an object:
              <pre class="code">
// All nodes in the network.
network.getPositions();
>   {
        a123: { x: 5, y: 12 },
        b456: { x: 3, y: 4 },
        c789: { x: 7, y: 10 }
    }


// Specific nodes.
network.getPositions(['a123', 'b456']);
>   {
        a123: { x: 5, y: 12 },
        b456: { x: 3, y: 4 },
    }


// A single node.
network.getPositions('a123');
>   {
        a123: { x: 5, y: 12 }
    }
                    
                    </pre
              >
              Alternative inputs are a string containing a nodeId or nothing.
              When a string is supplied, the position of the node corresponding
              to the id is returned in the same format. When nothing is
              supplied, the positions of all nodes are returned.
              <br />
              <strong
                >Note: If a non-existent id is supplied, the method will return
                an empty object.
              </strong>
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getPosition', this);"
          >
            <td colspan="2">
              <span
                parent="getPosition"
                class="right-caret"
                id="method_getPosition"
              ></span>
              getPosition(<code><i>nodeId</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="getPosition">
            <td class="midMethods">
              Returns: <code>Object</code>, Throws:
              <code>TypeError, ReferenceError</code>
            </td>
            <td>
              Returns the x y positions in canvas space of a specific node.
              <pre class="code">
network.getPosition('a123');
>   { x: 5, y: 12 }
                    </pre
              >

              If <em>no id</em> is provided, the method will throw a
              <code>TypeError</code>
              <br />
              If an <em>id</em> is provided that does not correspond to a node
              in the network, the method will throw a
              <code>ReferenceError</code>.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','storePositions', this);"
          >
            <td colspan="2">
              <span
                parent="storePositions"
                class="right-caret"
                id="method_storePositions"
              ></span>
              storePositions()
            </td>
          </tr>
          <tr class="hidden" parent="storePositions">
            <td class="midMethods">Returns: none</td>
            <td>
              When using the vis.DataSet to load your nodes into the network,
              this method will put the X and Y positions of all nodes into that
              dataset. If you're loading your nodes from a database and have
              this dynamically coupled with the DataSet, you can use this to
              stabilize your network once, then save the positions in that
              database through the DataSet so the next time you load the nodes,
              stabilization will be near instantaneous. <br /><br />
              If the nodes are still moving and you're using dynamic smooth
              edges (which is on by default), you can use the option
              <code>stabilization.onlyDynamicEdges</code> in the
              <a href="physics.html">physics module</a>
              to improve initialization time.
              <br /><br />
              <b
                >This method does not support clustering. At the moment it is
                not possible to cache positions when using clusters since they
                cannot be correctly initialized from just the positions.</b
              >
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','moveNode', this);"
          >
            <td colspan="2">
              <span
                parent="moveNode"
                class="right-caret"
                id="method_moveNode"
              ></span>
              moveNode(<code><i>nodeId, Number x, Number y</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="moveNode">
            <td class="midMethods">Returns: none</td>
            <td>
              You can use this to programmatically move a node.
              <i>The supplied x and y positions have to be in canvas space!</i>
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getBoundingBox', this);"
          >
            <td colspan="2">
              <span
                parent="getBoundingBox"
                class="right-caret"
                id="method_getBoundingBox"
              ></span>
              getBoundingBox(<code><i>String nodeId</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="getBoundingBox">
            <td class="midMethods">Returns: Object</td>
            <td>
              Returns a bounding box for the node including label in the format:
              <pre class="code">
{
  top: Number,
  left: Number,
  right: Number,
  bottom: Number
}
</pre
              >
              These values are in canvas space.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getConnectedNodes', this);"
          >
            <td colspan="2">
              <span
                parent="getConnectedNodes"
                class="right-caret"
                id="method_getConnectedNodes"
              ></span>
              getConnectedNodes(<code
                ><i>String nodeId or edgeId, [String direction]</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="getConnectedNodes">
            <td class="midMethods">Returns: Array</td>
            <td>
              Returns an array of nodeIds of all the nodes that are directly
              connected to this node or edge.<br /><br />
              For a node id, returns an array with the id's of the connected
              nodes.<br />
              If optional parameter <code>direction</code> is set to string
              <i>'from'</i>, only parent nodes are returned.<br />
              If <code>direction</code> is set to <i>'to'</i>, only child nodes
              are returned.<br />
              Any other value or <code>undefined</code> returns both parent and
              child nodes. <br /><br />
              For an edge id, returns an array: <code>[fromId, toId]</code>.
              Parameter <i>direction</i> is ignored for edges.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getConnectedEdges', this);"
          >
            <td colspan="2">
              <span
                parent="getConnectedEdges"
                class="right-caret"
                id="method_getConnectedEdges"
              ></span>
              getConnectedEdges(<code><i>String nodeId</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="getConnectedEdges">
            <td class="midMethods">Returns: Array</td>
            <td>
              Returns an array of edgeIds of the edges connected to this node.
            </td>
          </tr>

          <tr id="methodPhysics" class="subHeader">
            <td colspan="2">
              Physics methods to control when the simulation should run.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','startSimulation', this);"
          >
            <td colspan="2">
              <span
                parent="startSimulation"
                class="right-caret"
                id="method_startSimulation"
              ></span>
              startSimulation()
            </td>
          </tr>
          <tr class="hidden" parent="startSimulation">
            <td class="midMethods">Returns: none</td>
            <td>
              Start the physics simulation. This is normally done whenever
              needed and is only really useful if you stop the simulation
              yourself and wish to continue it afterwards.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','stopSimulation', this);"
          >
            <td colspan="2">
              <span
                parent="stopSimulation"
                class="right-caret"
                id="method_stopSimulation"
              ></span>
              stopSimulation()
            </td>
          </tr>
          <tr class="hidden" parent="stopSimulation">
            <td class="midMethods">Returns: none</td>
            <td>
              This stops the physics simulation and triggers a
              <code>stabilized</code> event. It can be restarted by dragging a
              node, altering the dataset or calling
              <code>startSimulation()</code>.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','stabilize', this);"
          >
            <td colspan="2">
              <span
                parent="stabilize"
                class="right-caret"
                id="method_stabilize"
              ></span>
              stabilize([iterations])
            </td>
          </tr>
          <tr class="hidden" parent="stabilize">
            <td class="midMethods">Returns: none</td>
            <td>
              You can manually call stabilize at any time. All the stabilization
              options above are used. You can optionally supply the number of
              iterations it should do.
            </td>
          </tr>

          <tr id="methodSelection" class="subHeader">
            <td colspan="2">Selection methods for nodes and edges.</td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getSelection', this);"
          >
            <td colspan="2">
              <span
                parent="getSelection"
                class="right-caret"
                id="method_getSelection"
              ></span>
              getSelection()
            </td>
          </tr>
          <tr class="hidden" parent="getSelection">
            <td class="midMethods">Returns: Object</td>
            <td>
              Returns an object with selected nodes and edges ids like this:
              <pre class="code">
{
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds]
}</pre
              >
            </td>
          </tr>

          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getSelectedNodes', this);"
          >
            <td colspan="2">
              <span
                parent="getSelectedNodes"
                class="right-caret"
                id="method_getSelectedNodes"
              ></span>
              getSelectedNodes()
            </td>
          </tr>
          <tr class="hidden" parent="getSelectedNodes">
            <td class="midMethods">Returns: Array</td>
            <td>
              Returns an array of selected node ids like so:
              <code>[nodeId1, nodeId2, ..]</code>.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getSelectedEdges', this);"
          >
            <td colspan="2">
              <span
                parent="getSelectedEdges"
                class="right-caret"
                id="method_getSelectedEdges"
              ></span>
              getSelectedEdges()
            </td>
          </tr>
          <tr class="hidden" parent="getSelectedEdges">
            <td class="midMethods">Returns: Array</td>
            <td>
              Returns an array of selected edge ids like so:
              <code>[edgeId1, edgeId2, ..]</code>.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getNodeAt', this);"
          >
            <td colspan="2">
              <span
                parent="getNodeAt"
                class="right-caret"
                id="method_getNodeAt"
              ></span>
              getNodeAt(<code><i>{x: xPosition DOM, y: yPosition DOM}</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="getNodeAt">
            <td class="midMethods">Returns: String</td>
            <td>
              Returns a nodeId or undefined. The DOM positions are expected to
              be in pixels from the top left corner of the canvas.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getEdgeAt', this);"
          >
            <td colspan="2">
              <span
                parent="getEdgeAt"
                class="right-caret"
                id="method_getEdgeAt"
              ></span>
              getEdgeAt(<code><i>{x: xPosition DOM, y: yPosition DOM}</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="getEdgeAt">
            <td class="midMethods">Returns: String</td>
            <td>
              Returns an edgeId or undefined. The DOM positions are expected to
              be in pixels from the top left corner of the canvas.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','selectNodes', this);"
          >
            <td colspan="2">
              <span
                parent="selectNodes"
                class="right-caret"
                id="method_selectNodes"
              ></span>
              selectNodes(<code><i>Array with nodeIds</i></code
              >,<code><i>[Boolean highlightEdges]</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="selectNodes">
            <td class="midMethods">Returns: none</td>
            <td>
              Selects the nodes corresponding to the id's in the input array. If
              highlightEdges is true or undefined, the neighbouring edges will
              also be selected. This method unselects all other objects before
              selecting its own objects. <i>Does not fire events</i>.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','selectEdges', this);"
          >
            <td colspan="2">
              <span
                parent="selectEdges"
                class="right-caret"
                id="method_selectEdges"
              ></span>
              selectEdges(<code><i>Array with edgeIds</i></code
              >)
            </td>
          </tr>
          <tr class="hidden" parent="selectEdges">
            <td class="midMethods">Returns: none</td>
            <td>
              Selects the edges corresponding to the id's in the input array.
              This method unselects all other objects before selecting its own
              objects. <i>Does not fire events</i>.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','setSelection', this);"
          >
            <td colspan="2">
              <span
                parent="setSelection"
                class="right-caret"
                id="method_setSelection"
              ></span>
              setSelection( <code>Object selection</code>,
              <code>[Object options]</code>)
            </td>
          </tr>
          <tr class="hidden" parent="setSelection">
            <td class="midMethods">Returns: none</td>
            <td>
              Sets the selection, which must be an object like this:
              <pre class="code">
{
  nodes: [Array of nodeIds],
  edges: [Array of edgeIds]
}</pre
              >
              You can also pass only <code>nodes</code> or <code>edges</code> in
              <code>selection</code> object. Available options are:
              <pre class="code">
{
  unselectAll: Boolean,
  highlightEdges: Boolean
}</pre
              >
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','unselectAll', this);"
          >
            <td colspan="2">
              <span
                parent="unselectAll"
                class="right-caret"
                id="method_unselectAll"
              ></span>
              unselectAll()
            </td>
          </tr>
          <tr class="hidden" parent="unselectAll">
            <td class="midMethods">Returns: none</td>
            <td>Unselect all objects. <i>Does not fire events</i>.</td>
          </tr>

          <tr id="methodViewport" class="subHeader">
            <td colspan="2">
              Methods to control the viewport for zoom and animation.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getScale', this);"
          >
            <td colspan="2">
              <span
                parent="getScale"
                class="right-caret"
                id="method_getScale"
              ></span>
              getScale()
            </td>
          </tr>
          <tr class="hidden" parent="getScale">
            <td class="midMethods">Returns: Number</td>
            <td>
              Returns the current scale of the network. 1.0 is comparable to
              100%, 0 is zoomed out infinitely.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','clusterByHubsize', this);"
          >
            <td colspan="2">
              <span
                parent="clusterByHubsize"
                class="right-caret"
                id="method_getViewPosition"
              ></span>
              getViewPosition()
            </td>
          </tr>
          <tr class="hidden" parent="clusterByHubsize">
            <td class="midMethods">Returns: Object</td>
            <td>
              Returns the current central focus point of the view in the form:
              <code>{ x: {Number}, y: {Number} }</code>
            </td>
          </tr>

          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','fit', this);"
          >
            <td colspan="2">
              <span parent="fit" class="right-caret" id="method_fit"></span>
              fit(<code>[Object options]</code>)
            </td>
          </tr>
          <tr class="hidden" parent="fit">
            <td class="midMethods">Returns: none</td>
            <td>
              Zooms out so all nodes fit on the canvas. You can supply options
              to customize this:
              <pre class="code">
{
  nodes?: (string | number)[],
  minZoomLevel?: number,
  maxZoomLevel?: number,
  animation?: boolean | {
    duration?: number
    easingFunction?: string
  }
}
</pre
              >
              The nodes can be used to zoom to fit only specific nodes in the
              view.<br />
              The min and max zoom levels can be used to constrain the fit
              within given levels. The default is from zero (not included)
              through one.<br /><br />
              The other options are explained in the <code>moveTo()</code>
              description below. All options are optional for the fit method.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','focus', this);"
          >
            <td colspan="2">
              <span parent="focus" class="right-caret" id="method_focus"></span>
              focus( <code>String nodeId</code>, <code>[Object options]</code>)
            </td>
          </tr>
          <tr class="hidden" parent="focus">
            <td class="midMethods">Returns: none</td>
            <td>
              You can focus on a node with this function. What that means is the
              view will lock onto that node, if it is moving, the view will also
              move accordingly. If the view is dragged by the user, the focus is
              broken. You can supply options to customize the effect:
              <pre class="code">
{
  scale: Number,
  offset: {x:Number, y:Number}
  locked: boolean
  animation: { // -------------------> can be a boolean too!
    duration: Number
    easingFunction: String
  }
}
</pre
              >
              All options except for locked are explained in the
              <code>moveTo()</code> description below. Locked denotes whether or
              not the view remains locked to the node once the zoom-in animation
              is finished. Default value is true. The options object is optional
              in the focus method.
            </td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','moveTo', this);"
          >
            <td colspan="2">
              <span
                parent="moveTo"
                class="right-caret"
                id="method_moveTo"
              ></span>
              moveTo(<code>Object options</code>)
            </td>
          </tr>
          <tr class="hidden" parent="moveTo">
            <td class="midMethods">Returns: none</td>
            <td>
              You can animate or move the camera using the moveTo method.
              Options are:
              <pre class="code">
{
  position: {x:Number, y:Number},
  scale: Number,
  offset: {x:Number, y:Number}
  animation: { // -------------------> can be a boolean too!
    duration: Number
    easingFunction: String
  }
}
</pre
              >
              The position (in canvas units!) is the position of the central
              focus point of the camera. The scale is the target zoomlevel.
              Default value is 1.0. The offset (in DOM units) is how many pixels
              from the center the view is focused. Default value is {x:0,y:0}.
              For animation you can either use a Boolean to use it with the
              default options or disable it or you can define the duration (in
              milliseconds) and easing function manually. Available are:
              <code
                >linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic,
                easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart,
                easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint</code
              >.

              <i
                >You will have to define at least a scale, position or offset.
                Otherwise, there is nothing to move to.</i
              >
            </td>
          </tr>

          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','releaseNode', this);"
          >
            <td colspan="2">
              <span
                parent="releaseNode"
                class="right-caret"
                id="method_releaseNode"
              ></span>
              releaseNode()
            </td>
          </tr>
          <tr class="hidden" parent="releaseNode">
            <td class="midMethods">Returns: none</td>
            <td>Programmatically release the focused node.</td>
          </tr>
          <tr id="methodConfigurator" class="subHeader">
            <td colspan="2">Methods to use with the configurator module.</td>
          </tr>
          <tr
            class="collapsible toggle"
            onclick="toggleTable('methodTable','getOptionsFromConfigurator', this);"
          >
            <td colspan="2">
              <span
                parent="getOptionsFromConfigurator"
                class="right-caret"
                id="method_getOptionsFromConfigurator"
              ></span>
              getOptionsFromConfigurator()
            </td>
          </tr>
          <tr class="hidden" parent="getOptionsFromConfigurator">
            <td class="midMethods">Returns: Object</td>
            <td>
              If you use the configurator, you can call this method to get an
              options object that contains all differences from the default
              options caused by users interacting with the configurator.
            </td>
          </tr>
        </table>

        <br />
        <br />

        <h4 id="optionsObject">Cluster methods options object</h4>

        <p>
          The options object supplied to the cluster functions can contain these
          properties:
        </p>
        <table class="methods">
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
          <tr>
            <td>
              joinCondition(<br />&nbsp;&nbsp;<code
                >nodeOptions:&nbsp;Object</code
              ><br />)<br />or<br />joinCondition(<br />&nbsp;&nbsp;<code
                >parentNodeOptions:&nbsp;Object,</code
              ><br />&nbsp;&nbsp;<code>childNodeOptions:&nbsp;Object</code
              ><br />)
            </td>
            <td>Function</td>
            <td>
              <i>Optional for all but the cluster method. </i> <br />
              <code>clusterByConnection</code> is the only function that will
              pass 2 nodeOptions objects as arguments to the joinCondition
              callback.<br />
              The cluster module loops over all nodes that are selected to be in
              the cluster and calls this function with their data as argument.
              If this function returns true, this node will be added to the
              cluster. You have access to all options (including the default) as
              well as any custom fields you may have added to the node to
              determine whether or not to include it in the cluster. Example:
              <pre class="prettyprint lang-js">
var nodes = [
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'},
  {id: 6, label: 'Node 6', cid:1},
  {id: 7, label: 'Node 7', cid:1}
]

var options = {
  joinCondition:function(nodeOptions) {
    return nodeOptions.cid === 1;
  }
}

network.clustering.cluster(options);
</pre
              >
              <code>clusterByConnection</code
              ><b>
                will pass 2 nodeOptions objects as arguments to the
                joinCondition callback.</b
              >
            </td>
          </tr>
          <tr>
            <td>
              processProperties(<br />&nbsp;&nbsp;<code>clusterOptions:&nbsp;Object</code>,<br />
              &nbsp;&nbsp;<code>childNodesOptions:&nbsp;Array</code>,<br />
              &nbsp;&nbsp;<code>childEdgesOptions:&nbsp;Array</code><br />)
            </td>
            <td>Function</td>
            <td>
              <i>Optional. </i> Before creating the new cluster node, this
              (optional) function will be called with the properties supplied by
              you (<code>clusterNodeProperties</code>), all contained nodes and
              all contained edges. You can use this to update the properties of
              the cluster based on which items it contains. The function should
              return the properties to create the cluster node. In the example
              below, we ensure preservation of mass and value when forming the
              cluster:
              <pre class="prettyprint lang-js">
var options = {
  processProperties: function (clusterOptions,
      childNodes, childEdges) {
    var totalMass = 0;
    var totalValue = 0;
    for (var i = 0; i < childNodes.length; i++) {
      totalMass += childNodes[i].mass;
      totalValue = childNodes[i].value
        ? totalValue + childNodes[i].value
        : totalValue;
    }
    clusterOptions.mass = totalMass;
    if (totalValue > 0) {
      clusterOptions.value = totalValue;
    }
    return clusterOptions;
  },
}
</pre
              >
            </td>
          </tr>
          <tr>
            <td id="event_clusterNodeProperties">clusterNodeProperties</td>
            <td>Object</td>
            <td>
              <i>Optional. </i> This is an object containing the options for the
              cluster node. All options described in the
              <a href="./nodes.html">nodes module</a> are allowed. This allows
              you to style your cluster node any way you want. This is also the
              style object that is provided in the processProperties function
              for fine tuning. If undefined, default node options will be
              used.<br /><br />
              Default functionality only allows clustering if the cluster will
              contain 2 or more nodes. To allow clustering of single nodes you
              can use the <code>allowSingleNodeCluster : true</code> property.
              <pre class="prettyprint lang-js">
    clusterNodeProperties: {
        allowSingleNodeCluster: true
    }
</pre
              >
            </td>
          </tr>
          <tr>
            <td id="event_clusterEdgeProperties">clusterEdgeProperties</td>
            <td>Object</td>
            <td>
              <i>Optional. </i> This is an object containing the options for the
              edges connected to the cluster. All options described in the
              <a href="./edges.html">edges module</a> are allowed. Using this,
              you can style the edges connecting to the cluster any way you
              want. If none are provided, the options from the edges that are
              replaced are used. If undefined, default edge options will be
              used.
            </td>
          </tr>
        </table>
      </div>
      <br />
      <hr />
      <div id="eventsDiv">
        <h2 id="Events">Events</h2>

        <p>
          This is a list of all the events in the public API. They are collected
          here from all individual modules.
        </p>

        <p>
          These events are fired by the interaction module. They are related to
          user input.
        </p>
        <table class="events">
          <tr>
            <th>Name</th>
            <th>Properties</th>
            <th>Description</th>
          </tr>
          <tr class="subHeader">
            <td colspan="3">
              Events triggered by human interaction, selection, dragging etc.
            </td>
          </tr>
          <tr>
            <td id="event_click">click</td>
            <td>Object</td>
            <td>
              Fired when the user clicks the mouse or taps on a touchscreen
              device. Passes an object with properties structured as:

              <pre class="prettyprint lang-js">
{
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds],
  event: [Object] original click event,
  pointer: {
    DOM: {x:pointer_x, y:pointer_y},
    canvas: {x:canvas_x, y:canvas_y}
  }
}
</pre
              >

              This is the structure common to all events. Specifically for the
              click event, the following property is added:

              <pre class="prettyprint lang-js">
{
...
  items: [Array of click items],
}</pre
              >

              Where the click items can be:
              <pre class="prettyprint lang-js">
  {nodeId:NodeId}            // node with given id clicked on
  {nodeId:NodeId labelId:0}  // label of node with given id clicked on
  {edgeId:EdgeId}            // edge with given id clicked on
  {edge:EdgeId, labelId:0}   // label of edge with given id clicked on
</pre
              >

              The order of the <code>items</code> array is descending in
              z-order. Thus, to get the topmost item, get the value at index 0.
            </td>
          </tr>
          <tr>
            <td id="event_doubleClick">doubleClick</td>
            <td>same as <code>click</code>.</td>
            <td>
              Fired when the user double clicks the mouse or double taps on a
              touchscreen device. Since a double click is in fact 2 clicks, 2
              click events are fired, followed by a double click event. If you
              do not want to use the click events if a double click event is
              fired, just check the time between click events before processing
              them.
            </td>
          </tr>
          <tr>
            <td id="event_oncontext">oncontext</td>
            <td>same as <code>click</code>.</td>
            <td>
              Fired when the user click on the canvas with the right mouse
              button. The right mouse button does not select by default. You can
              use the method <code>getNodeAt</code> to select the node if you
              want.
            </td>
          </tr>
          <tr>
            <td id="event_hold">hold</td>
            <td>same as <code>click</code>.</td>
            <td>
              Fired when the user clicks and holds the mouse or taps and holds
              on a touchscreen device. A click event is also fired in this case.
            </td>
          </tr>
          <tr>
            <td id="event_release">release</td>
            <td>same as <code>click</code>.</td>
            <td>
              Fired after drawing on the canvas has been completed. Can be used
              to draw on top of the network.
            </td>
          </tr>
          <tr>
            <td id="event_select">select</td>
            <td>same as <code>click</code>.</td>
            <td>
              Fired when the selection has changed by user action. This means a
              node or edge has been selected, added to the selection or
              deselected.
              <b>All select events are only triggered on click and hold</b>.
            </td>
          </tr>
          <tr>
            <td id="event_selectNode">selectNode</td>
            <td>same as <code>click</code>.</td>
            <td>Fired when a node has been selected by the user.</td>
          </tr>
          <tr>
            <td id="event_selectEdge">selectEdge</td>
            <td>same as <code>click</code>.</td>
            <td>Fired when an edge has been selected by the user.</td>
          </tr>
          <tr>
            <td id="event_deselectNode">deselectNode</td>
            <td>Object</td>
            <td>
              Fired when a node (or nodes) has (or have) been deselected by the
              user. The previous selection is the list of nodes and edges that
              were selected before the last user event. Passes an object with
              properties structured as:
              <pre class="prettyprint lang-js">
{
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds],
  event: [Object] original click event,
  pointer: {
    DOM: {x:pointer_x, y:pointer_y},
    canvas: {x:canvas_x, y:canvas_y}
    }
  },
  previousSelection: {
    nodes: [Array of previously selected nodeIds],
    edges: [Array of previously selected edgeIds]
  }
}
</pre
              >
            </td>
          </tr>
          <tr>
            <td id="event_deselectEdge">deselectEdge</td>
            <td>same as <code>deselectNode</code>.</td>
            <td>
              Fired when an edge (or edges) has (or have) been deselected by the
              user. The previous selection is the list of nodes and edges that
              were selected before the last user event.
            </td>
          </tr>
          <tr>
            <td id="event_dragStart">dragStart</td>
            <td>same as <code>click</code>.</td>
            <td>Fired when starting a drag.</td>
          </tr>
          <tr>
            <td id="event_dragging">dragging</td>
            <td>same as <code>click</code>.</td>
            <td>Fired when dragging node(s) or the view.</td>
          </tr>
          <tr>
            <td id="event_dragEnd">dragEnd</td>
            <td>same as <code>click</code>.</td>
            <td>Fired when the drag has finished.</td>
          </tr>
          <tr>
            <td id="event_controlNodeDragging">controlNodeDragging</td>
            <td>Object</td>
            <td>
              Fired when dragging control node. Control Edge is edge that is
              being dragged and contains ids of 'from' and 'to' nodes. If
              control node is not dragged over another node, 'to' field is
              undefined. Passes an object with properties structured as:

              <pre class="prettyprint lang-js">
{
    nodes: [Array of selected nodeIds],
    edges: [Array of selected edgeIds],
    event: [Object] original click event,
    pointer: {
        DOM: {x:pointer_x, y:pointer_y},
        canvas: {x:canvas_x, y:canvas_y}
    },    
    controlEdge: {from:from_node_id, to:to_node_id}
}
</pre
              >
            </td>
          </tr>
          <tr>
            <td id="event_controlNodeDragEnd">controlNodeDragEnd</td>
            <td>same as <code>controlNodeDragging</code>.</td>
            <td>Fired when the control node drag has finished.</td>
          </tr>
          <tr>
            <td id="event_hoverNode">hoverNode</td>
            <td><code>{node: nodeId}</code></td>
            <td>
              Fired if the option <code>interaction:{hover:true}</code> is
              enabled and the mouse hovers over a node.
            </td>
          </tr>
          <tr>
            <td id="event_blurNode">blurNode</td>
            <td><code>{node: nodeId}</code></td>
            <td>
              Fired if the option <code>interaction:{hover:true}</code> is
              enabled and the mouse moved away from a node it was hovering over
              before.
            </td>
          </tr>
          <tr>
            <td id="event_hoverEdge">hoverEdge</td>
            <td><code>{edge: edgeId}</code></td>
            <td>
              Fired if the option <code>interaction:{hover:true}</code> is
              enabled and the mouse hovers over an edge.
            </td>
          </tr>
          <tr>
            <td id="event_blurEdge">blurEdge</td>
            <td><code>{edge: edgeId}</code></td>
            <td>
              Fired if the option <code>interaction:{hover:true}</code> is
              enabled and the mouse moved away from an edge it was hovering over
              before.
            </td>
          </tr>
          <tr>
            <td id="event_zoom">zoom</td>
            <td>Object</td>
            <td>
              Fired when the user zooms in or out. The properties tell you which
              direction the zoom is in. The scale is a number greater than 0,
              which is the same that you get with network.getScale(). When fired
              by clicking the zoom in or zoom out navigation buttons, the
              pointer property of the object passed will be null. Passes an
              object with properties structured as:
              <pre class="prettyprint lang-js">
{
  direction: '+'/'-',
  scale: Number,
  pointer: {x:pointer_x, y:pointer_y}
}
</pre
              >
            </td>
          </tr>
          <tr>
            <td id="event_showPopup">showPopup</td>
            <td><code>id of item corresponding to popup</code></td>
            <td>Fired when the popup (tooltip) is shown.</td>
          </tr>
          <tr>
            <td id="event_hidePopup">hidePopup</td>
            <td>none</td>
            <td>Fired when the popup (tooltip) is hidden.</td>
          </tr>
          <tr class="subHeader">
            <td colspan="3">
              Events triggered the physics simulation. Can be used to trigger
              GUI updates.
            </td>
          </tr>
          <tr>
            <td id="event_startStabilizing">startStabilizing</td>
            <td>none</td>
            <td>
              Fired when stabilization starts. This is also the case when you
              drag a node and the physics simulation restarts to stabilize
              again. Stabilization does not necessarily imply 'without showing'.
            </td>
          </tr>

          <tr>
            <td id="event_stabilizationProgress">stabilizationProgress</td>
            <td>Object</td>
            <td>
              Fired when a multiple of the <code>updateInterval</code> number of
              iterations is reached. This only occurs in the 'hidden'
              stabilization. Passes an object with properties structured as:

              <pre class="prettyprint lang-js">
{
  iterations: Number // iterations so far,
  total: Number      // total iterations in options
}</pre
              >
            </td>
          </tr>
          <tr>
            <td id="event_stabilizationIterationsDone">
              stabilizationIterationsDone
            </td>
            <td>none</td>
            <td>
              Fired when the 'hidden' stabilization finishes. This does not
              necessarily mean the network is stabilized; it could also mean
              that the amount of iterations defined in the options has been
              reached.
            </td>
          </tr>

          <tr>
            <td id="event_stabilized">stabilized</td>
            <td>Object</td>
            <td>
              Fired when the network has stabilized or when the
              <code>stopSimulation()</code> has been called. The amount of
              iterations it took could be used to tweak the maximum amount of
              iterations needed to stabilize the network. Passes an object with
              properties structured as:
              <pre class="prettyprint lang-js">
{
  iterations: Number // iterations it took
}</pre
              >
            </td>
          </tr>

          <tr class="subHeader">
            <td colspan="3">Event triggered by the canvas.</td>
          </tr>
          <tr>
            <td id="event_resize">resize</td>
            <td>Object</td>
            <td>
              Fired when the size of the canvas has been resized, either by a
              redraw call when the container div has changed in size, a
              setSize() call with new values or a setOptions() with new width
              and/or height values. Passes an object with properties structured
              as:

              <pre class="prettyprint lang-js">
{
  width: Number     // the new width  of the canvas
  height: Number    // the new height of the canvas
  oldWidth: Number  // the old width  of the canvas
  oldHeight: Number // the old height of the canvas
}
</pre
              >
            </td>
          </tr>
          <tr class="subHeader">
            <td colspan="3">
              Events triggered by the rendering module. Can be used to draw
              custom elements on the canvas.
            </td>
          </tr>
          <tr>
            <td id="event_initRedraw">initRedraw</td>
            <td>none</td>
            <td>
              Fired before the redrawing begins. The simulation step has
              completed at this point. Can be used to move custom elements
              before starting drawing the new frame.
            </td>
          </tr>

          <tr>
            <td id="event_beforeDrawing">beforeDrawing</td>
            <td><code>canvas context</code></td>
            <td>
              Fired after the canvas has been cleared, scaled and translated to
              the viewing position but before all edges and nodes are drawn. Can
              be used to draw behind the network.
            </td>
          </tr>

          <tr>
            <td id="event_afterDrawing">afterDrawing</td>
            <td><code>canvas context</code></td>
            <td>
              Fired after drawing on the canvas has been completed. Can be used
              to draw on top of the network.
            </td>
          </tr>
          <tr class="subHeader">
            <td colspan="3">Event triggered by the view module.</td>
          </tr>
          <tr>
            <td id="event_animationFinished">animationFinished</td>
            <td>none</td>
            <td>Fired when an animation is finished.</td>
          </tr>
          <tr class="subHeader">
            <td colspan="3">Event triggered by the configuration module.</td>
          </tr>
          <tr>
            <td id="event_configChange">configChange</td>
            <td>Object</td>
            <td>
              Fired when a user changes any option in the configurator. The
              options object can be used with the setOptions method or
              stringified using JSON.stringify(). You do not have to manually
              put the options into the network: this is done automatically. You
              can use the event to store user options in the database.
            </td>
          </tr>
        </table>
      </div>

      <br />
      <hr />
      <div id="importDiv">
        <h2 id="importing_data">Importing data</h2>

        <p>
          Network contains conversion utilities to import data from
          <a href="#importGephi">Gephi</a> and graphs in the
          <a href="#importDot">DOT language</a>.
        </p>

        <h3 id="importGephi">Import data from Gephi</h3>

        <p>
          Network can import data straight from an exported json file from
          gephi. You can get the JSON exporter here:
          <a
            href="https://gephi.org/plugins/#/plugin/jsonexporter-plugin"
            target="_blank"
            >https://gephi.org/plugins/#/plugin/jsonexporter-plugin</a
          >. An example exists showing how to get a JSON file into Vis:
        </p>

        <p>Example usage:</p>

        <pre class="prettyprint lang-js">
// load the JSON file containing the Gephi network.
const { default: gephiJSON } = await import(
  "./datasources/WorldCup2014.json",
  { with: { type: "json" } }
);

// you can customize the result like with these options. These are explained below.
// These are the default options.
var parserOptions = {
  fixed: true,
  parseColor: false,
  inheritColor: false
}

// parse the gephi file to receive an object
// containing nodes and edges in vis format.
var parsed = vis.parseGephiNetwork(gephiJSON, parserOptions);

// provide data in the normal fashion
var data = {
  nodes: parsed.nodes,
  edges: parsed.edges
};

// create a network
var network = new vis.Network(container, data);
</pre
        >

        <br />
        <h4>Gephi parser options</h4>

        There are a few options you can use to tell Vis what to do with the data
        from Gephi.
        <table class="options">
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
          </tr>
          <tr>
            <td>fixed</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              When false, the nodes will move according to the physics model
              after import. If true, the nodes do not move at all. If set to
              true, the node positions have to be defined to avoid infinite
              recursion errors in the physics.
            </td>
          </tr>
          <tr>
            <td>parseColor</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>
              If true, the color will be parsed by the vis parser, generating
              extra colors for the borders, highlights and hover. If false, the
              node will be the supplied color.
            </td>
          </tr>
          <tr>
            <td>inheritColor</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>
              When true, the color supplied by gephi is ignored and the inherit
              color mode is used with the global setting.
            </td>
          </tr>
        </table>

        <h3 id="importDot">Import data in DOT language</h3>

        <p>
          Network supports data in the
          <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank"
            >DOT language</a
          >. To use data in the DOT language, you can use the
          vis.parseDOTNetwork converter function to transform the DOT language
          string into a Vis Network compatible nodes, edges and options. You can
          alter or extend the returned nodes, edges and options if you like.
        </p>

        <p>Example usage:</p>

        <pre class="prettyprint lang-js">
// provide data in the DOT language
var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.parseDOTNetwork(DOTstring);

var data = {
  nodes: parsedData.nodes,
  edges: parsedData.edges
}

var options = parsedData.options;

// you can extend the options like a normal JSON variable:
options.nodes = {
  color: 'red'
}

// create a network
var network = new vis.Network(container, data, options);
</pre
        >
      </div>

      <div class="flagbar">
        <a href="../../docs/network/index.html" title="English"
          ><span class="flag en"></span
        ></a>
        <a href="../../docs-kr/network/index.html" title="Korean"
          ><span class="flag kr"></span
        ></a>

        <br />

        Third party docs:
        <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
          ><span class="flag zh"></span
        ></a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
    <!-- jquery extensions -->
    <script src="../../common-docs-files/js/jquery.highlight.js"></script>
    <script src="../../common-docs-files/js/jquery.url.min.js"></script>
    <!-- Tipue vendor js -->
    <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
    <!-- controller -->
    <script src="../../common-docs-files/js/main.js"></script>
  </body>
</html>
